<template>
  <div class="w-full content">
    <van-tabs v-model:active="active" sticky @change="handleItemChange">
      <van-tab v-for="(item, index) in tabsList" :title="item.name">
        <div
          @click="allOrder"
          class="flex justify-end w-full pr-1.25rem"
          v-show="index == 2 && list.length > 0"
        >
          <div
            class="w-5.75rem h-1.875rem flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem text-0.875rem my-0.625rem"
          >
            一键收款
          </div>
        </div>
        <div
          @click="allSj"
          class="flex justify-end w-full pr-1.25rem"
          v-show="index == 3 && list.length > 0"
        >
          <div
            class="w-5.75rem h-1.875rem flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem text-0.875rem my-0.625rem"
          >
            一键上架
          </div>
        </div>
        <div v-if="list">
          <order
            @otherInformation="otherInformation"
            @pay="pay"
            @collect="collect"
            @upGoods="upGoods"
            @upSell="upSell"
            :data="list"
            v-if="list.length > 0"
          ></order>
          <div v-else class="mt-200px">
            <nodata></nodata>
          </div>
        </div>

        <div
          :style="isMobile ? 'width:100%' : 'width:23.4375rem'"
          class="p-0.625rem bg-white fixed bottom-3.125rem"
        >
          <div class="justify-between items-center flex">
            <div
              class="h-2.375rem flex justify-center items-center text-0.875rem text-[#999999]"
            >
              <van-button
                type="primary"
                @click="back()"
                class="w-124px"
                :disabled="backDisabled"
                >上一页</van-button
              >
            </div>
            <div>{{ current_page }} / {{ last_page }}</div>
            <div
              class="h-2.375rem flex justify-center items-center text-0.875rem text-white"
            >
              <van-button
                type="primary"
                class="w-124px"
                @click="next()"
                :disabled="nextDisabled"
                >下一页</van-button
              >
            </div>
          </div>
          <div class="mt-0.625rem text-[.875rem] w-full text-center">
            当前页：{{ current_page }}，数据总量：
            <span class="text-[#F13535]">{{ total }}</span> 条，每页数据：{{
              per_page
            }}
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup
      v-model:show="popupShow"
      round
      :style="{ padding: '.625rem' }"
      @close="popupClose"
    >
      <div class="w-21.875rem pb-0.9375rem border-b">对方信息</div>
      <div class="mt-1.25rem">
        <van-radio-group
          v-model="radioChecked"
          direction="horizontal"
          class="text-0.75rem"
          @change="radioChange"
        >
          <van-radio name="0">银行卡</van-radio>
          <!-- <van-radio name="1">微信</van-radio> -->
          <van-radio name="2">支付宝</van-radio>
          <van-radio name="3">USDT钱包</van-radio>
        </van-radio-group>
      </div>
      <div v-show="radioChecked == 0">
        <div class="mt-1.25rem pb-1.25rem border-b">银行卡转账</div>
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div>
            <span class="text-[#999999]">收款人姓名：</span> {{ Info.name }}
          </div>
          <div
            @click="copy(Info.name)"
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div>
        </div>
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div>
            <span class="text-[#999999]">银行卡号：</span> {{ Info.bank_no }}
          </div>
          <div
            @click="copy(Info.bank_no)"
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div>
        </div>
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div>
            <span class="text-[#999999]">开户银行：</span> {{ Info.bank_name }}
          </div>
          <div
            @click="copy(Info.bank_name)"
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div>
        </div>
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div>
            <span class="text-[#999999]">开户行名称：</span>
            {{ Info.bank_address }}
          </div>
          <div
            @click="copy(Info.bank_address)"
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div>
        </div>
        <div
          @click="popupShow = false"
          class="mt-1.25rem w-full flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem h-3.0625rem"
        >
          关闭
        </div>
      </div>
      <!-- <div v-show="radioChecked == 1">
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div class="mt-1.25rem">微信转账二维码</div>
          <div
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div>
        </div>
        <div class="mt-1.25rem w-full flex justify-center">
          <van-image
            @click="getImage"
            width="7.25rem"
            height="10.875rem"
            fit="cover"
            :src="Info.wechat_code"
          />
          <van-image-preview
            v-model:show="previewShow"
            @closed="previewClose"
            :images="[Info.wechat_code]"
            :show-index="false"
            :loop="false"
            class-name="images"
          >
          </van-image-preview>
        </div>
        <div
          @click="popupShow = false"
          class="mt-1.25rem w-full flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem h-3.0625rem"
        >
          关闭
        </div>
      </div> -->
      <div v-show="radioChecked == 2">
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div class="mt-1.25rem">支付宝转账二维码</div>
          <!-- <div
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div> -->
        </div>
        <div class="mt-1.25rem w-full flex justify-center">
          <van-image
            @click="getImage"
            width="7.25rem"
            height="10.875rem"
            fit="cover"
            :src="Info.alipay_code"
          />
          <van-image-preview
            v-model:show="previewShow"
            @closed="previewClose"
            :images="[Info.alipay_code]"
            :show-index="false"
            :loop="false"
            class-name="images"
          >
          </van-image-preview>
        </div>
        <div
          @click="popupShow = false"
          class="mt-1.25rem w-full flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem h-3.0625rem"
        >
          关闭
        </div>
      </div>
      <div v-show="radioChecked == 3">
        <div
          class="pb-1.25rem border-b w-full flex justify-between items-center text-0.75rem mt-1.25rem"
        >
          <div class="mt-1.25rem">USDT转账二维码</div>
          <!-- <div
            class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] text-white rounded-1rem"
          >
            复制信息
          </div> -->
        </div>
        <div class="mt-1.25rem w-full flex justify-center">
          <van-image
            @click="getImage"
            width="7.25rem"
            height="10.875rem"
            fit="cover"
            :src="Info.wallet_code"
          />
          <van-image-preview
            v-model:show="previewShow"
            @closed="previewClose"
            :images="[Info.wallet_code]"
            :show-index="false"
            :loop="false"
            class-name="images"
          >
          </van-image-preview>
        </div>
        <div
          @click="popupShow = false"
          class="mt-1.25rem w-full flex justify-center items-center bg-[#2E95FF] text-white rounded-0.3125rem h-3.0625rem"
        >
          关闭
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { useUserStore } from "@/store/index";
import order from "@/components/order.vue";
import nodata from "@/components/nodata.vue";
import { showConfirmDialog, showToast } from "vant";
import h5Copy from "@/util/junyi-h5-copy";
import {
  userOrder,
  sellUserInfo,
  userTruePay,
  userTrueCollect,
  userPickUpGoods,
  userSell,
  allTrueCollect,
  upperOrderAllDo,
} from "@/util/api";
import { reactive, computed } from "vue";
const store = useUserStore();
const isMobile = ref(store.isMobile);
const popupShow = ref(false);
const tabsList = ref([
  { name: "全部" },
  { name: "待付款" },
  { name: "待收款" },
  { name: "待上架" },
  { name: "已出售" },
]);

const previewShow = ref(false);
const radioChecked = ref("0");
const active = ref("0");
const list = ref([]);
const param = reactive({
  page: 1,
  state: 0, //0全部1待付款2待确认3待上架4已销售
});
const Info = reactive({
  id: 1, //订单id
  no: "", //邀请码
  name: "", //收款姓名
  mobile: "", //手机号
  avatar: "", //头像
  password: "", //登录密码
  tjuser_id: 0, //推荐人id
  is_shop: 1, //是不是店长1是0不是
  shop_name: "", //店铺名称
  shop_prefix: "", //店铺编号前缀
  shop_no: "", //店铺号
  shop_id: 1, //所属店铺id
  wechat_code: "", //微信二维码
  alipay_code: "", //支付宝二维码
  network_link: "", //交易网络链
  usdt_url: "", //USDT钱包地址
  wallet_code: "", //钱包二维码
  bank_name: "", //银行名称
  bank_address: "", //开户行名称
  bank_no: "", //银行卡号
  balance: "", //账户余额
  state: 1, //0全部1
  create_time: 1697613763,
});
const current_page = ref(0);
const last_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const backDisabled = computed(() => {
  if (current_page.value == 1) {
    return true;
  } else {
    return false;
  }
});
const nextDisabled = computed(() => {
  if (current_page.value >= last_page.value) {
    return true;
  } else {
    return false;
  }
});
const getData = async () => {
  const res = await userOrder(param);
  list.value = res.msg.data;
  current_page.value = res.msg.current_page;
  last_page.value = res.msg.last_page;
  per_page.value = res.msg.per_page;
  total.value = res.msg.total;
  // console.log(list.value);
};
getData();
const handleItemChange = (v) => {
  param.state = v;
  getData();
  if (v == 2) {
    //待收款
  }
  // console.log(v);
};
const radioChange = (v) => {
  // console.log(v);
  radioChecked.value = v;
};
const getImage = () => {
  previewShow.value = true;
};
const previewClose = () => {
  previewShow.value = false;
};
const popupClose = () => {
  previewShow.value = false;
};
const otherInformation = async (id) => {
  popupShow.value = true;
  //获取对方信息
  const res = await sellUserInfo({ id: id });
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  //  console.log(Info);
};
//下一页
const next = () => {
  param.page++;
  getData();
};
const back = () => {
  param.page--;
  getData();
};
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
//确认付款
const pay = async (id) => {
  showConfirmDialog({
    title: "确认付款",
    message: "您确认付款吗",
    theme: "round-button",
  })
    .then(async () => {
      const res = await userTruePay({ id: id });
      showToast(res.msg);
      getData();
    })
    .catch(() => {
      // console.log("qux");
      // on cancel
    });
};
//确认收款
const collect = async (id) => {
  showConfirmDialog({
    title: "确认收款",
    message: "您确认收款吗",
    theme: "round-button",
  })
    .then(async () => {
      const res = await userTrueCollect({ id: id });
      showToast(res.msg);
      getData();
    })
    .catch(() => {
      // console.log("qux");
      // on cancel
    });
};
//提货
const upGoods = async (id) => {
  showConfirmDialog({
    title: "确认提货",
    message: "您确认提货吗",
    theme: "round-button",
  })
    .then(async () => {
      const res = await userPickUpGoods({ id: id });
      showToast(res.msg);
      getData();
    })
    .catch(() => {
      //  console.log("qux");
      // on cancel
    });
};
//上架
const upSell = (id) => {
  showConfirmDialog({
    title: "确认上架",
    message: "您确认上架吗",
    theme: "round-button",
  })
    .then(async () => {
      const res = await userSell({ id: id });
      showToast(res.msg);
      getData();
    })
    .catch(() => {
      //  console.log("qux");
      // on cancel
    });
};
//一键收款
const allOrder = async () => {
  const res = await allTrueCollect();
  showToast(res.msg);
  getData();
};
const allSj = async () => {
  const res = await upperOrderAllDo();
  showToast(res.msg);
  getData();
};
</script>
<style scoped lang="scss">
// :deep(.van-swipe__track) {
//   width: 12.5rem !important;
// }
// :deep(.van-swipe-item) {
//   width: 12.5rem !important;
// }
:deep(.images) {
  // width: 12.5rem;
  // height: 12.5rem;
  vertical-align: bottom !important;
}
</style>
